<template>
  <el-card :body-style="{ padding: '0px!important' }">
    <el-carousel :interval="2000" arrow="never" height="180px">
      <el-carousel-item v-for="item in dataInfo.picUrls ? dataInfo.picUrls.split(',') : ['']" :key="item">
        <el-image :src="item" fit="scale-down" style="height: 180px">
          <div slot="error" class="image-slot">
            <i class="el-icon-picture-outline"></i>
          </div>
        </el-image>
      </el-carousel-item>
    </el-carousel>
    <div class="info">
      <el-tooltip :content="dataInfo ? dataInfo.commodityName : ''" effect="dark" placement="top">
        <div class="info-item info-title">{{ dataInfo ? dataInfo.commodityName : '' }}</div>
      </el-tooltip>
      <el-tooltip :content="'条码：' + (dataInfo ? dataInfo.barcode || dataInfo.customCode : '')" effect="dark"
                  placement="top">
        <div class="info-item">￥{{ dataInfo ? dataInfo.salePrice : '' }}元</div>
      </el-tooltip>
    </div>
  </el-card>
</template>

<script>
export default {
  name: 'CommodityItem',
  props: {
    dataInfo: {type: Object, default: {}}
  },
  data () {
    return {}
  }
}
</script>

<style scoped>
.info {
  width: 100%;
  height: 60px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: #409EFF;
  color: white;
}

.info-title {
  font-weight: bold;
  padding: 0 2px;
}
</style>